{% extends 'base/base_width_left.html' %}
{% load staticfiles %}
{% block flag %}server{% endblock %}
{% block style %}
   <link rel="stylesheet" href="{% static 'autosearch/css/styles.css' %}"/>
{% endblock %}
{% block path %}
    <a href="{% url 'server:list' %}" title="" class="tip-bottom">项目/节点管理</a>
    <a href="" title="" class="tip-bottom">节点编辑</a>
{% endblock %}
{% block container %}
    <form action="" method="POST" onsubmit="return true" class="form-horizontal" enctype="multipart/form-data"
          novalidate="novalidate">
        {% csrf_token %}
        <div class="form-group"><label class="col-sm-2 control-label" for="id_server_manage">项目管理</label>
            <div class="col-sm-4">
{#                <select name="server_manage" title="" required="" class="form-control"#}
{#                                          id="id_server_manage">#}
{#                <option value="" selected="">---------</option>#}
{##}
{#                <option value="1">啊啊啊</option>#}
{##}
{#            </select>#}
                <input hidden name="server_manage" value="{{ server_manage.id }}"/>
                <input name="" value="{{ server_manage.name }}" title="" required="" id="id_server_manage" maxlength="50"
                       placeholder="" class="form-control input-lg null" type="text">
{#                <div id="selction-ajax"></div>#}
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_ip">Ip地址</label>
            <div class="col-sm-4">
{#                <input name="ip" value="192.168.1.108" title="" required="" id="id_ip" maxlength="50"#}
{#                       placeholder="请输入ip地址" class="form-control input-lg null" type="text">#}
                {{ form.ip }}
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_port">端口号</label>
            <div class="col-sm-4">
{#                <input name="port" value="22" title="" required="" id="id_port" maxlength="50"#}
{#                                         placeholder="请输入ip端口" class="form-control input-lg null" type="text">#}
            {{ form.port}}
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_ssh_user">节点账户</label>
            <div class="col-sm-4">
{#                <input name="ssh_user" value="root" title="" required="" id="id_ssh_user"#}
{#                                         maxlength="30" placeholder="请输入ip的账户名" class="form-control input-lg null"#}
{#                                         type="text">#}
                {{ form.ssh_user}}
            </div>
        </div>
        <div class="form-group"><label class="col-sm-2 control-label" for="id_ssh_password">节点密码</label>
            <div class="col-sm-4">
{#                <input name="ssh_password" value="111111" title="" required="" id="id_ssh_password"#}
{#                                         maxlength="128" placeholder="请输入ip的账户密码" class="form-control input-lg null"#}
{#                                         type="text">#}
            {{ form.ssh_password}}
            </div>
        </div>


        <div class="form-group">
            <button type="button" class="btn btn-primary col-xs-11 col-md-1 col-md-offset-3">保
                存
            </button>
            <!-- 				<a href="" class="btn btn-default col-xs-11 col-md-1 col-md-offset-1">返回</a> -->
        </div>


    </form>

{% endblock %}
{% block footjs %}
{#<script type="application/javascript" src="{% static 'autosearch/jquery-1.8.2.min.js' %}"></script>#}
<script type="application/javascript" src="{% static 'autosearch/js/jquery.mockjax.js' %}"></script>
<script type="application/javascript" src="{% static 'autosearch/js/jquery.autocomplete.js' %}"></script>
<script type="application/javascript" src="{% static 'autosearch/js/countries.js' %}"></script>
<script>
 $("#id_server_manage").autocomplete({
        minChars: 1,
        maxHeight:300,
        serviceUrl:'{% url 'server:autocomplete' %}',
        //lookup: countriesArray,
        //lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
         //   var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
          //  return re.test(suggestion.value);
        //},
        onSelect: function(suggestion) {
            $('input[name="server_manage"]').val(suggestion.data);
        },
{#        onHint: function (hint) {#}
{#            $('#id_server_manage').val(hint);#}
{#        },#}
        onInvalidateSelection: function() {
           $('input[name="server_manage"]').val('');
        }
 });
        $(".btn").on('click',function(){
            var smid=$('input[name="server_manage"]').val();
            if(smid != ''){
                $("form").submit();
            }else{
                var item=$("#id_server_manage").val();
                alert("项目:"+item+",不存在");
            }
        })
</script>
{% endblock %}